<template>
    <div class="app_iframe">
        <el-dialog class="above_dialog" :title="dialogOption.title" :visible.sync="options.visible" :width="dialogOption.width"
                   :before-close="dialogOption.handleClose" append-to-body>
            <div class="dialog_content" style="height: 100%;">
                <iframe :src="iframe_src" allowfullscreen="true" frameborder="0" style="width: 100%;height: 100%;" ref="iframe" />
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="options.visible = false">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {AES} from '@common/utils/crypto';
    import {mapState} from "vuex";

    /**
     * 参数
     * optons = {
            visible: true,
            url: '/partview?id=1b8af1346f5649ad87fae1df477ad686',
            dialogOption: {
                title: '测试',
            },
        };
     */

    export default {
        name: 'AppIFrame',
        props: {
            options: {
                type: Object,
                default: () => {
                    return {};
                }
            }
        },
        data () {
            return {
                defaultDialogOpt: {
                    width: '430px',
                },
                dialogOption: {},
                iframe_src: '',
            };
        },
        computed: {
            ...mapState(['accessToken']),
        },
        watch: {
            options () {
                this.initData();
            },
        },
        mounted () {
            this.initData();
            window.addEventListener('message', this.handleMessage);
        },
        methods: {
            initData () {
                this.dialogOption = $.extend({}, this.defaultDialogOpt, this.options.dialogOption);
                let data = {
                    url: this.options.url,
                    type: this.options.type,
                    pro_sid: this.options.pro_sid,
                    token: this.accessToken.token,
                };
                let str = AES.en(JSON.stringify(data));
                this.iframe_src = window.configs.appRedirectPrefix + encodeURIComponent(str) + '&v=' + new Date().getTime();
            },
            sendMessage(data) {
                if (this.$refs.iframe) {
                    let iframeWin = this.$refs.iframe.contentWindow;
                    iframeWin.postMessage({cmd: 'MxMntMessage', data}, '*');
                }
            },
            handleMessage(event) {
                let eventData = event.data;
                if (eventData.cmd && eventData.cmd === 'iframeMessage') {
                    console.log('iframeMessage：', eventData.data);
                    this.$emit('handleMessage', eventData.data);
                }
            },
        },
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .app_iframe {
        /deep/ .el-dialog__body {
            background-color: #f7f8fa;

            .dialog_content {
                background-color: #fff;
                width: 400px;
                height: 100%;
                overflow: hidden;
                border-radius: 12px;
                margin: 0 auto;
                box-shadow: #ebedf0 0 4px 12px;
            }
        }
    }
</style>
